<template>
  <div style="width: 100%;height: 100%;">
    <div class="con" ref="chartUrgency"></div>
  </div>
</template>

<script>
import {getAction} from "@/api/manage";

export default {
  name: "EventUrgencyPage",
  components: {},
  data() {
    return {}
  },
  mounted() {
    this.getUrgencyData();
  },
  created() {

  },
  methods: {
    getUrgencyData() {
      let that = this;
      let params = {};
      var data = [
        {
          value: 10,
          type: "1",
          name: "一级"
        },
        {
          value: 20,
          type: "2",
          name: "二级"
        },
        {
          value: 30,
          type: "3",
          name: "三级"
        },
        {
          value: 40,
          type: "4",
        }
      ]
      var label = ["一级", "二级", "三级", "四级"];
      that.chartUrgency(data, label);
      // getAction('/statistic/event/getUrgencyData', params).then(response => {
      //   let list = response.data;
      //   console.info(response.data)
      //   if (response != null && list != null) {
      //     let data = new Array();
      //     let label = new Array();
      //     for (let i = 0; i < list.length; i++) {
      //       let item = {
      //         value: list[i].cou,
      //         type: list[i].type ? list[i].type : "99",
      //         name: list[i].name ? list[i].name : "其他"
      //       };
      //       data.push(item);
      //       label.push(list[i].name ? list[i].name : "其他");
      //     }
      //     console.info(data)
      //     console.info(label)
      //     that.chartUrgency(data, label);
      //   }
      // });
    },

    chartUrgency(data, labels){
      let that=this
      let charts = that.$echarts.init(this.$refs.chartUrgency,'');
      let option = {
        color:["#1776FF"],
        title: {
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: '5%',
          left: '10%',
          bottom:'20%'
        },
        xAxis: {
          type: 'category',
          data: labels,
          axisLabel : {
            interval: 0,//横轴信息全部显示
            textStyle: {
              color: '#FFFFFF'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#fff'
          }
        },
        series: [
          {
            data: data,//[120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            label: {
              show: true,
              position: 'top'
            },
          }
        ]
      };
      charts.setOption(option);
      // 监听 window 窗口大小变化的事件
      window.onresize = function () {
        // 调用 echarts 实例对象的 resize 方法
        charts.resize()
      }
    },


  }
}
</script>
<style scoped lang="scss">

</style>
